import React, { Component } from 'react';
import { DetailStyle } from './style';

import { withRouter } from 'react-router-dom'
import { connect } from 'react-redux'
import { setHomeListData } from '@/store/action/home'
// 引入详情头部
import Header from '@/components/Header'
import xiazai from '@/assets/images/ia_100000021.png'

@connect(state => ({
  homeListData: state.getIn(['home', 'homeListData']).toJS()
}), { setHomeListData })
@withRouter
class index extends Component {

  componentDidMount() {
    this.props.setHomeListData()
  }
  render() {
    // console.log(this.props)
    // console.log( this.props.match.params)
    // console.log(this.props.homeListData)
    const data = this.props.homeListData.find(item => item.data.item_id === this.props.match.params.id)
    // console.log( data)
    return (
      <DetailStyle>
        <Header title="home详情" />
        <div className="homeDetail">
          <img src={xiazai} className="bkImg" />
          <div className="content">
            <div className="banner">
              <img src={data.data.img} alt="" />
            </div>
            <div className="details">
              <div className="detail-content">
                <p className="price">{data.data.price ? '￥' + data.data.price : ''}</p>
                <p className="name">{data.data.title}</p>
              </div>
            </div>
          </div>

        </div>


        {/* <div className="supplier-list">
              <div className="sh-baozhang"></div>
              <div className="nav goApp" url="https://bho9.t4m.cn/5537709384815349760?mobDownload=http://www.shihuo.cn/app/assets/m_detail/1.0.0/appDownload.html">
                  <p className="title">17个渠道商在售</p>
                  <p className="desc">查看全部</p>
                  <div className="arrow"></div>
              </div>
              <div className="list">
                  <div className="item active">
                      <img className="logo" alt="" src="https://shihuo.hupucdn.com/Lark20210311-193605.png" />
                      <p className="name">识货查验店铺</p>
                      <p className="price">¥234</p>
                  </div>
                  <div className="item">
                      <img className="logo" alt="" src="http://shihuo.hupucdn.com/kupload2018/202012/15779590540000.png" />
                      <p className="name">得物</p>
                      <p className="price">¥269</p>
                  </div>
                  <div className="item">
                    <img className="logo" alt="" src="http://shihuo.hupucdn.com/441c3e258bb0ad164151c3b26669f79a.png" />
                    <p className="name">天猫</p>
                    <p className="price">¥299</p>
                  </div>
                  <div className="item">
                      <img className="logo" alt="" src="http://shihuo.hupucdn.com/appZone/202004/2714/7b99c0e87d146dc9dc99e32f64f6292c.png" />
                      <p className="name">京东</p>
                      <p className="price">¥509</p>
                  </div>
              </div>
          </div> */}


                {/* 静态的
        <div className="homeDetail">
          <div className="banner">
            <img src="http://shihuo.hupucdn.com/def/20190108/7cd54785548f4f1ff08b7465d3c27b641546934214.jpg?imageView2/1/w/1300/h/1300/interlace/1#keepOn" alt="" />
          </div>
          <div className="details">
            <div className="detail-content">
              <p className="price">￥229</p>
              <p className="name">Nike Run Swift Black White Dark Grey 黑白</p>
            </div>
          </div>
        </div> */}
      </DetailStyle>
    );
  }
}

export default index;
